<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>jQuery File Upload Example</title>
	<jsp:include page="../header.jsp">
	<jsp:param name="groups" value="jquery,jquery-ui,fileupload,common"/>
	</jsp:include>

	<style type="text/css">
	.bar {
		height: 18px;
		background: green;
	}
	</style>
</head>
<body>

<input id="fileupload" type="file" name="files[]" data-url="FileUploadAction/upload.do" multiple>

<div id="progress" style="width:100px;">
    <div class="bar" style="width: 0%;"></div>
</div>

<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        //done: function (e, data) {
        //	console.log(data);
        //    $.each(data.result, function (index, file) {
        //        $('<p/>').text(file.name).appendTo(document.body);
        //    });
        //},
	    progressall: function (e, data) {
	        var progress = parseInt(data.loaded / data.total * 100, 10);
	        $('#progress .bar').css(
	            'width',
	            progress + '%'
	        );
	    },
        //add: function (e, data) {
        //    data.context = $('<button/>').text('Upload')
        //        .appendTo(document.body)
        //        .click(function () {
        //            $(this).replaceWith($('<p/>').text('Uploading...'));
        //            data.submit();
        //        });
        //},
        done: function (e, data) {
        	alert(data.result[0].name);
            data.context.text(' Upload finished.');
        }
    });
});
</script>
</body> 
</html>
